/**
 * @description 图片码
 */
import style from './styles/ImgCode.less';
import classnames from "classnames";
import React from 'react';
import { Popup } from 'wd-mobile';

import util from "commons/util";
import QRCode from 'qrcode'
import copy from 'copy-to-clipboard';
import JsBarcode from 'jsbarcode';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            qrcode: "",
            isPicture: ""
        }
    }
    componentDidMount () {
        const { cardValue, qrCode, cardPwd } = this.props

        if (qrCode || cardValue || cardPwd) {
            QRCode.toDataURL(qrCode || cardValue || cardPwd)
                .then(url => {
                    this.setState({
                        qrcode: url,
                    })
                })
                .catch(err => {
                    console.error(err)
                })
            JsBarcode(this.barcode, qrCode || cardValue || cardPwd, {
                displayValue: false,
                height: 180,
                margin: 0,
            })
        }

    }
    render () {
        return (
            <div className={style.container}>
                <div className={style.barCode} >
                    <svg
                        ref={ref => {
                            this.barcode = ref
                        }}
                    />
                </div>
                <div className={style.imgCode}>
                    <img src={this.state.qrcode} alt="" />
                </div>
                <div className={style.couponCodeItem}>
                    <div className={style.couponCodeItemLeft}>
                        <span className={style.couponCodeItemTitle}>券码：</span>
                        <span className={style.couponCodeItemValue}>{this.props.qrCode || this.props.cardValue || this.props.cardPwd}</span>
                    </div>
                    <div className={style.couponCodeItemCopy} onClick={() => {
                        this.copyCardValue();
                    }}>复制</div>
                </div>
                <div className={style.checkOriginCode} onClick={() => {
                    let clear;
                    Popup.create({
                        animation: "scale",
                        mask: true,
                        maskStyle: { background: "rgba(0,0,0,0.7)" },
                        onClickMask: () => clear(),
                        offset: { top: 0, left: 0, right: 0 },
                        content: <div onClick={() => clear()} className={style.imgCodeContent}><img src={this.props.cardValue} /></div>
                    }, sender => {
                        clear = sender.destroy
                    })
                }}>查看原图</div>
            </div>
        )
    }

    // 复制券码
    copyCardValue () {
        copy(this.props.cardValue);
        Toast.info("券码已复制");
    }
}
export default App;